<template>
  <div>
    <a-carousel autoplay  effect="fade">
      <div class="bg-focus bg-focus1"></div>
      <div class="bg-focus bg-focus2"></div>
      <div class="bg-focus bg-focus3"></div>
      <div class="bg-focus bg-focus4"></div>
    </a-carousel>
  </div>
</template>

<script>

export default {
  name: 'HomeSwiper',
  data() {
    return {
    };
  },
  created() {
  },
  components: {
  },
  methods: {
  }
};
</script>

<style scoped lang="less">
.bg-focus1{
  background: url('../../../../assets/img/culture.jpg');
}
.bg-focus2{
  background: url('../../../../assets/img/yao-banner1.jpg');
}
.bg-focus3{
  background: url('../../../../assets/img/yao-banner2.jpg');
}
.bg-focus4{
  background: url('../../../../assets/img/yao-banner3.jpg');
}
.bg-focus {
  width: 100%;
  height: 800px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
</style>
